<template>
  <div>
    {{unAttr}}
    <el-form ref="form"
             label-width="80px"
             :model="spuData">
      <el-form-item label="SPU名称">
        <el-input placeholder="SPU名称"
                  v-model="spuData.spuName"></el-input>
      </el-form-item>
      <el-form-item label="品牌">
        <el-select v-model="spuData.spuSaleAttrList"
                   placeholder="请选择品牌">
          <el-option :label="trys.tmName"
                     v-for="(trys ,index) in tradeMarkList"
                     :key="trys.id"
                     :value="trys.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="SPU描述">

        <el-input type="textarea"
                  v-model="spuData.description"
                  placeholder="SPU描述"
                  rows='4'></el-input>
      </el-form-item>

      <el-form-item label="SPU图片">
        <!-- 上传图片  -->
        <el-upload action="/dev-api/admin/product/fileUpload"
                   list-type="picture-card"
                   :file-list="spuImageLis"
                   :on-preview="handlePictureCardPreview"
                   :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%"
               :src="spuImageLis.imgUrl"
               alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-select v-model="model"
                   placeholder="还有3未选择">
          <el-option label="label" v-for="(attr,index) in unAttr" :key="attr.id"
                     value="value"></el-option>
        </el-select>
        <el-button type="primary"
                   icon="el-icon-plus"
                   :disabled="disabled">添加销售属性</el-button>
        <el-table style="width: 100%"
                  :data="spuData.spuSaleAttrList">
          <el-table-column align="center"
                           type="index"
                           label="序号"
                           width="80">
          </el-table-column>
          <el-table-column prop="saleAttrName"
                           label="属性名">
          </el-table-column>
          <el-table-column prop="prop"
                           label="属性值名称列表">
            <template slot-scope="{row,$index}">
              <el-tag :key="tag.id"
                      v-for="tag in row.spuSaleAttrValueList"
                      closable
                      :disable-transitions="false"
                     >
                      <!-- @close="handleClose(tag)" -->
                {{tag.saleAttrName}}
              </el-tag>
              <el-input class="input-new-tag"
                        v-if="row.inputVisible"
                        v-model="inputValue"
                        ref="saveTagInput"
                        size="small"
                   
                       >
                        <!--      @keyup.enter.native="handleInputConfirm"  @blur="handleInputConfirm" -->
              </el-input>
              <el-button v-else
                         class="button-new-tag"
                         size="small"
                         @click="showInput">添加</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="prop"
                           label="操作">
            <template slot-scope="{row,$index}">
              <div>
                <el-button type="danger"
                           icon="el-icon-delete"
                           size="mini"></el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">确定</el-button>
        <el-button @click="$emit('screen1')">取消</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
export default {
  name: '',
  components: {

  },
  props: {

  },
  data () {
    return {
      model: '',
      spuData: {
        category3Id: '',
        spuName: "",  // spu名称
        description: "", // 描述
        spuImageLis: [
          // {
          //   "id": 0,
          //   "imgName": "string",
          //   "imgUrl": "string",
          //   "spuId": 0
          // }
        ],
        spuSaleAttrList: [
          {
            "baseSaleAttrId": 0,
            "id": 0,
            "saleAttrName": "string",
            "spuId": 0,
            "spuSaleAttrValueList": [
              {
                "baseSaleAttrId": 0,
                "id": 0,
                "isChecked": "string",
                "saleAttrName": "string",
                "saleAttrValueName": "string",
                "spuId": 0
              }
            ]
          }
        ],
        tmId: 0
      },
      tradeMarkList: [], //品牌信息
      spuImageLis: [],// 图片
      attrList: [], //获取平台销售属性
      disabled: '',
      dialogImageUrl: '',
      dialogVisible: false
    };
  },
  computed: {
    unAttr(){
     let list =  this.attrList.filter(item=>{
        return this.spuData.spuSaleAttrList.every(items=>{
          return item.name !==items.saleAttrName 
        })
      })
      return list
    }
  },
  watch: {

  },
  created () {

  },
  mounted () {

  },
  methods: {
    handleRemove (file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    async initDate (row) {
      console.log(row);
      // 获取spu信息接口
      let spuReq = await this.$API.spu.reqSpu(row.id)
      if (spuReq.code === 200)
      {
        this.spuData = spuReq.data
      }
      //  品牌
      let tradeMarkReq = await this.$API.spu.reqTrademark()
      if (tradeMarkReq.code === 200)
      {
        this.tradeMarkList = tradeMarkReq.data
      }
      // 图片 
      let SpuImgReq = await this.$API.spu.reqSpuImg(row.id)
      if (SpuImgReq.code === 200)
      {
        // 添加 name  url 属性 
        let list = SpuImgReq.data
        list.forEach(item => {
          item.name = item.imgName
          item.url = item.imgUrl
        });
        this.spuImageLis = list
      }
      // 获取平台销售属性
      let attrListReq = await this.$API.spu.reqAttr()
      if (attrListReq.code === 200)
      {
        this.attrList = attrListReq.data
      }
    }

  },
};
</script>

<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>

